
 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>聊天记录</title>

<link rel="stylesheet" href="/Public/Swoole/layui/css/layui.css" media="all">
<style>
body .layim-chat-main{height: auto;}
</style>
</head>
<body>

<div class="layim-chat-main">
  <ul id="LAY_view"></ul>
</div>

<div id="LAY_page" style="margin: 0 10px;text-align: center;"></div>


<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.id == parent.layui.layim.cache().mine.id){ }}
    <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp) }}</i>{{ item.username }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# } else { }}
    <li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp) }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# }
}); }}
</textarea>

<!-- 
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html

-->


<script src="/Public/Swoole/layui/layui.js"></script>
<script src="/Public/Swoole/js/jquery.min.js""></script>
<script>
layui.use(['layim', 'laypage'], function(){
  var layim = layui.layim
  ,layer = layui.layer
  ,laytpl = layui.laytpl
  ,$ = layui.jquery
  ,laypage = layui.laypage;
  //聊天记录的分页此处不做演示，你可以采用laypage，不了解的同学见文档：http://www.layui.com/doc/modules/laypage.html
  
    // 初始化运行
  
    //开始请求聊天记录
    var param =  location.search //获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭据
  
    getPage();
  //console.log(param)

function getPage(curr){
    $.post('./chat_log'+param, { curr: curr} , function(res){
        // 这里处理 res.lists 中的数据内容，使用 html() 方法显示
    // 略……
    if(res.code == 0) {
        var html = laytpl(LAY_tpl.value).render({
          data: res.data
            });
            $('#LAY_view').html(html);
        } else {
            alert('laychat服务端返回失败：' + res.msg);
        }
        //显示分页
        // laypage({
        //     cont: 'LAY_page', // 容器
        //     pages: res.allpage,   // 总页数(后台的)
        //     curr: res.nowpage, //当前页(后台获取到的)
        //     skip: true,
        //     groups: 3,
        //     // first: false,
        //     // last: false,
        //     jump: function(obj, first){ //触发分页后的回调(单击页码后)
        //         if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
        //             getPage(obj.curr); // (被单击的页码)
        //         }
        //     }
        // });
        //显示分页
        laypage.render({
          elem: 'LAY_page',
          limit: res.pagesize,
          count: res.count,
          curr: res.nowpage, //获取起始页
          layout:   ['prev', 'next'],
          jump: function(obj, first) { //触发分页后的回调(单击页码后)
                if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                    getPage(obj.curr); // (被单击的页码)
                }
            }
        }); 
    }, 'json');
};
  
});
</script>
</body>
</html>
